.bgpurple {
    background-color: purple;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 4px 5px 5px #d6d6d6;
}

.bggreen {
    @extend .bgpurple;
    background-color: green;
}

.bgcyan {
@extend .bgpurple;
    background-color: darkcyan;
}

.bgorange {
	@extend .bgpurple;
		background-color: rgb(245, 149, 39);
	}

.bgbrown {
	@extend .bgpurple;
		background-color: rgb(124, 43, 5);
	}

.bgdarkred {
	@extend .bgpurple;
	background-color: rgb(153, 1, 1);
	}

.bgblue {
	@extend .bgpurple;
	background-color: rgb(47, 109, 189);
	}

.project_detail_title {
    background-color: #323e48;
	margin-left: 2rem;
	margin-right: 2rem;
	margin-top: 2rem;
}


.release_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	margin-bottom: 2rem;
}

.version_list {
    padding-right: 2rem;
	color: darkblue;
	text-decoration: underline;
	transition: none;
	font-size: 15px;
	font-weight: 400;
}

.event_item_list {
    padding-right: 2rem;
	color: darkblue;
	transition: none;
	font-size: 15px;
	font-weight: 400;
}

.ci_items {
	background: white;
	border: solid black 1px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	color: darkblue;
	text-decoration: underline;
	transition: none;
	font-size: 15px;
	font-weight: 400;
	margin-right: 20px;
	padding-left: 10px;
	padding-right: 10px;
	display: flex;
	align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: center;
}

.ci_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: row;
	transition: none;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.story_list {
	display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    align-content: center;
    transition: none;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}

.story_items {
	background: white;
	color: darkblue;
	transition: none;
	font-size: 15px;
	font-weight: 400;
	margin-right: 20px;
	padding-left: 10px;
	padding-right: 10px;
	align-content: center;
    justify-content: space-around;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
	border: solid black 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
	margin-bottom: 1rem;
}

.event_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	flex-direction: column;
	transition: none;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.work_list {
	display: flex;
	justify-content: flex-start;
	flex-wrap: nowrap;
	flex-direction: column;
	transition: none;
	padding-bottom: 0.5rem;
	padding-top: 0.5rem;
}

.container {
	display: block;
	margin: 0 auto;
	margin-bottom: 1rem;
	max-width: 70em;
	padding: 0 3rem;
	@include clearfix;
}

.overview_container_out {
	display: flex;
    flex-flow: row;
	-ms-flex-direction: row;
	align-content: center;
	justify-content: space-around;
	margin: 2rem auto;
	margin-bottom: 0rem;
	padding: 0 2rem;
	font-size: 1.5rem;
	font-weight: 400;
	@include clearfix;
}

.overview_container_in {
	width: 100rem;
	display: block;
	margin-bottom: 1rem;
	margin-right: 4rem;
	padding: 0 2rem;
	font-size: 1.5rem;
	font-weight: 400;
	@include clearfix;
}

.overview_img {
    display: block;
	transform: scale(1.25);
	margin-right: 3rem;
}

.ci_status_img {
	margin-top: 5px;
    width: 100px;
    margin-left: 20px;
}

.story_item_logo {
    width: 200px;
	margin-right: 30px;
}

.project_container {
	display: block;
	margin: 1rem auto;
	margin-bottom: 1rem;
	padding: 0 2rem;
	font-size: 1.5rem;
	font-weight: 400;
	@include clearfix;
}

.project_section_line{
	margin-top: 15px!important;
	margin-bottom: 20px!important;
	background-color: #ccc;
	height: 1px;
	border: none;
}

.intro_content {
	display: contents;
	margin: 0 auto;
	margin-bottom: 1rem;
	max-width: 70em;
	padding: 0 3rem;
	font-weight: 400;
	@include clearfix;
}

.project_section {	
	color: #98cc33;
	display: block;
	font-family: $font-lekton;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: .2rem;
    line-height: 1;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.menu_title {
	display: block;
	max-width: 70em;
	padding: 0.2rem 0;
	@include clearfix;
}

.header {
	background: $color-white;
	padding: 0 0;
}

.logo {
	float: left;
	font-size: 1.8rem;
	font-weight: 600;
	margin: 0;
	line-height: 1;
}

.nav {
	float: right;

	a {
		@extend .logo;
	}
}

.content {
	background: white;
	padding: 1rem 0 0;
	margin-bottom: 31.24rem;
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;

	@media (min-width: $breakpoint-medium) {
		padding: 2.5rem 0 0;
		margin-bottom: 23.42rem;
	}
}

.intro,
.projects {
	padding: 0 0 1rem;
}

.intro {
	@media (min-width: $breakpoint-medium) {
		p {
			font-size: 2.7rem;
			max-width: 66.66666%;
		}
	}
}

.projects-list-bigdata {
	padding: 1rem 1rem;
	padding-bottom: 0px;
	margin-bottom: 2px;
	border-left: 2px solid purple;
	border-right: 2px solid purple;
	border-bottom: 2px solid purple;
	background: white;
	box-shadow: 4px 5px 5px #d6d6d6;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
	display: flex;
	flex-wrap: wrap;
	@include clearfix;

	li {
		margin-bottom: 1rem;
		margin-right: 2rem;
		width: 100px;
		float: left;
		display: block;
		text-align: center;
		border: 1px solid darkgray;
        display: inline-table;
        border-radius: 4px;
        box-shadow: 2px 2px 4px #d6d6d6;

	}

	a {
		&:hover {
			.img-wrapper {
				&:before {
					opacity: 1;
				}
				&:after {
					opacity: .45;
				}
			}
		}
	}

	.img-wrapper {
		position: relative;

		&:before {
			content: "View Details";
			color: $color-white;
			@extend .h2;
			font-size: 0.5rem;
			font-weight: 400;
			position: absolute;
			top: 50%;
			left: 45%;
			margin-top: -.5rem;
			margin-left: -4.4rem;
			opacity: 0;
			-webkit-transition: all .5s ease-in-out;
    		transition: all .5s ease-in-out;
    		-webkit-transition-delay: .25s;
    		transition-delay: .25s;
    		z-index: 2;
		}

		&:after {
			background: #000;
			content: "";
			display: block;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			opacity: 0;
			-webkit-transition: all .5s ease-in-out;
    		transition: all .5s ease-in-out;
    		z-index: 1;
		}
	}

	h3 {
		@extend .h3;
		font-size: 0.4rem;
        font-weight: 300;
		margin-bottom: 2px;
		padding-top: 2px;
		border-top: 1px solid darkgray;	
	}

	img {
			width: 80%;
            margin: 0 auto;
	}
}

.projects-list-database {
    @extend .projects-list-bigdata;
    border-left: 2px solid green;
	border-right: 2px solid green;
	border-bottom: 2px solid green;
}

.projects-list-middle {
    @extend .projects-list-bigdata;
    border-left: 2px solid rgb(245, 149, 39);
    border-right: 2px solid rgb(245, 149, 39);
    border-bottom: 2px solid rgb(245, 149, 39);
}

.projects-list-web {
    @extend .projects-list-bigdata;
    border-left: 2px solid darkcyan;
	border-right: 2px solid darkcyan;
	border-bottom: 2px solid darkcyan;
}

.projects-list-cloud {
    @extend .projects-list-bigdata;
    border-left: 2px solid rgb(124, 43, 5);
	border-right: 2px solid rgb(124, 43, 5);
	border-bottom: 2px solid rgb(124, 43, 5);
}

.projects-list-ai {
    @extend .projects-list-bigdata;
    border-left: 2px solid rgb(153, 1, 1);
	border-right: 2px solid rgb(153, 1, 1);
	border-bottom: 2px solid rgb(153, 1, 1);
}

.projects-list-libraries {
    @extend .projects-list-bigdata;
    border-left: 2px solid rgb(47, 109, 189);
	border-right: 2px solid rgb(47, 109, 189);
	border-bottom: 2px solid rgb(47, 109, 189);
}

.footer {
	background: white;
	bottom: 0;
	left: 0;
	padding: 5rem 0;
	position: fixed;
	right: 0;
	z-index: -1;
}

.contact,
.follow {
	@media (min-width: $breakpoint-medium) {
		float: left;
		margin-bottom: 0;
		width: 33.33333%;
	}
}

.contact,
.follow {
	margin-bottom: 3rem;
}
